<template>
  <div class="user">
    <tophead title="个人中心"><router-link to="/user" slot="r"></router-link></tophead>
    <h1>user</h1>
    <div id="pie" ref="pie"></div>
  </div>
</template>

<script>
import TopHead from "@/components/TopHead.vue";
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "user",
  data() {
    return {};
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.pie);
    myChart.setOption({
      series: [
        {
          name: "访问来源",
          type: "pie",
          color: ["#10903d", "#eee"],
          radius: ["95%", "100%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" }
          ]
        }
      ]
    });
  },
  components: {
    tophead: TopHead
  }
};
</script>

<style lang="scss" scoped>
#pie {
  width: 175px;
  height: 175px;
}
</style>
